//焦点轮播图
.banner{
    width: 100%;
    &:hover .swiper-container .slider-prev{
        left: 0;
    }
    &:hover .swiper-container .slider-next{
        right: 0;
    }
    .swiper-container{
        position: relative;
        overflow: hidden;
        backface-visibility: hidden;
        .swiper-wrapper{
            width:500%;
            height:auto;
            position: relative;
            .swiper-slide{
                float: left;
                width: 20%;
                a{
                     img {
                        display: block;
                        margin: auto;
                    }
                }
            }
        }
        .pagination{
            position: absolute;
            left: 0;
            text-align: center;
            bottom: 5px;
            width: 100%;
            z-index: 99;
            .pagination-switch {
                display: inline-block;
                width: 6px;
                height: 6px;
                border: 1px solid rgba(255,255,255,0.5);
                border-radius: 6px;
                margin: 0 3px;
                cursor: pointer;
            }
            .pagination-switch-active {
                background: pink;
            }
        }
        .arrow {
            background-color: #FFF;
            text-align: center;
            position: absolute;
            top: 50%;
            z-index: 99;
            display: block;
            width: 32px;
            margin-top: -25px;
            height: 50px;
            line-height: 50px;
            font-size: 16px;
            background-color: rgb(0,0,0);
            background-color: rgba(0,0,0,0.8);
            color: #FFF;
            cursor: pointer;
            transition: all 0.3s ease-out;
            &:hover{
                background: #00c3b6;
            }
        }
        .slider-prev {
            left: -40px;
            border-radius: 0 2px 2px 0;
        }
        .slider-next {
            right: -40px;
            border-radius: 2px 0 0 2px;
        }
    }
}

//网站介绍
.site_intro {
    padding: 40px 20px;
    text-align: center;
    background: white;
    h2 {
        padding: 10px 0;
    }
}
//关于网站
.site_about {
    background: url("../img/about_bg.PNG");
    .about-inner {
        padding: 40px 20px;
        .inner-left {
            float: left;
            width: 45%;
            .title {
                font-size: 24px;
                color: #55554D;
            }
            .about-desc {
                color: #A69D93;
                line-height: 25px;
                font-size: 20px;
                margin-top: 10px;
                margin-bottom: 20px;
            }
        }
        .inner-right {
            float: left;
            width: 40%;
            margin-left: 50px;
            padding-bottom: 20px;
            img{
                float: left;
            }
            .foreword {
                width: 50%;
                padding-left: 20px;
                margin-top: 30px;
                line-height: 25px;
                float: right;
                .author {
                    font-size: 12px;
                }
            }
        }
    }
}
//网站事件
#eventswrapper {
    margin-top: 30px;
    .site_events {
        .event_nav {
            padding: 40px 20px;
            background: url("../img/site_info_bg.png");
            .nav-icon {
                width: 50%;
                float: left;
                .event-plan {
                    margin-left: 120px;
                    .plan-desc {
                        color: white;
                    }
                    .plan-time {
                        padding: 10px 0;
                        color: #CCB298;
                    }
                    .btn {
                        margin-top: 10px;
                        font-size: 14px;
                        outline: 0;
                        border: 0;
                        cursor: pointer;
                    }
                    .detall-btn {
                        width: 97px;
                        height: 31px;
                        background: url("../img/btn1.png");
                    }
                    .share-btn {
                        width: 87px;
                        height: 31px;
                        background: url("../img/btn2.png");
                    }
                }
            }
            .nav-time {
                width: 48%;
                float: right;
                .service {
                    .title {
                        font-size: 26px;
                        i {
                            color: #C1A990;
                        }
                    }
                    .time {
                        color: #C1A990;
                        font-size: 18px;
                        text-align: right;
                    }
                }
            }
        }
        .event_list {
            .list-container {
                margin: 30px 20px;
                .events_sort {
                    float: left;
                    width: 22%;
                    margin-right: 36px;
                    .sort-tab {
                        padding-bottom: 20px;
                        border-bottom: 1px solid gray;
                        .tab-desc {
                            margin-top: 10px;
                            font-size: 14px;
                            color: #B9B9B5;
                        }
                    }
                    .event-record {
                        .record-sheet {
                            padding: 30px 0;
                            border-bottom: 1px solid gray;
                            .record-time {
                                width: 83px;
                                height: 83px;
                                border-radius: 3px;
                                cursor: pointer;
                                position: relative;
                                &:hover{
                                    transform: scale(1.2);
                                    transition: all .3s linear;
                                }
                                .time-month {
                                    font-size: 16px;
                                    color: #55554D;
                                    position: absolute;
                                    top: 25px;
                                    left: 26px;
                                }
                                .time-days {
                                    font-size: 14px;
                                    color: #A59C95;
                                    position: absolute;
                                    top: 48px;
                                    left: 26px;
                                }
                            }
                            .record-desc {
                                margin-left: 110px;
                                .depict {
                                    line-height: 22px;
                                }
                                .depict-time {
                                    font-size: 14px;
                                    margin-top: 10px;
                                }
                            }
                            .event{
                                background: url("../img/events_bg.png");
                            }
                            .news{
                                background: url(../img/news_bg.jpg);
                            }
                            .media{
                                background: url(../img/media_bg.jpg);
                            }
                            .sermons{
                                background: url(../img/sermons_bg.jpg);
                            }
                        }
                        .btn {
                            border-bottom: none;
                            .events_btn {
                                outline: 0;
                                border: 0;
                                padding:10px 5px ;
                                border-radius: 3px;
                                cursor: pointer;
                                background: #7B6754;
                                opacity: 0.8;
                                transition:opacity 0.3s linear;
                                font-size: 12px;
                                font-weight: 600;
                                font-family: "微软雅黑";
                                &:hover {
                                   opacity:1;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
//图片展示
.about-banner{
    .Show-picture{
        width: 100%;
        height: auto;
        opacity: 0.8;
        img {
                display: block;
                margin: auto;
            }
    }
   
}
//网站搜索
.site_search {
    padding: 30px 20px;
    font-weight: 700;
    background: palegoldenrod;
    .search-left {
        width: 60%;
        float: left;
        .title {
            color: #171411;
            font-size: 26px;
        }
        .site-desc {
            margin-top: 10px;
            color: #B9B9B5;
        }
    }
    .search-right {
        width: 35%;
        float: right;
        position: relative;
        .input-icon {
            width: 25px;
            height: 20px;
            border-right: 1px dashed gray;
            position: absolute;
            top: 8px;
            left: 8px;
            i{
                color:#AD9C99 ;
            }
        }
        .input-box {
            border: 0;
            outline: 0;
            width: 250px;
            height: 35px;
            border-radius: 25px;
            padding-left: 50px;
            background: #F7F7F7;
        }
    }
}
//关于网站页面的分页项
.about-sort {
    height: 100%;
    overflow: hidden;
    padding: 30px 20px;
    background: url("../img/about-sort-bg.PNG");
    .sort-wrapper {
        margin-bottom: 0;
        float: left;
        width: 100%;
        background-color: inherit;
        #sortDesc {
            margin-left: 210px;
            box-shadow: 0 1px 2px rgba(0,0,0,0.1);
            .desc-head {
                font-size: 20px;
                color:black;
                padding: 20px 0 0 30px;
                height: auto;
                overflow: hidden;
            }
            .desc-content {
                max-width: 960px;
                padding: 10px 30px;
                margin: auto;
                font-size: 14px;
                line-height: 1.8;
                p {
                    margin: 20px auto;
                    font-size: 16px;
                    color: #A59C95;
                }
                .desc-paragraph{
                    width: 72%;
                    margin-left:0;
                }
            }
            article{
                display: none;
                position: relative;
                .sort-pic{
                   position:absolute;
                   top:30px;
                   right:15px; 
                }
            }
            .active{
                display: block;
            }
        }
    }
    .aside {
        width: 160px;
        float: left;
        margin-left: -100%;
        box-shadow: 0 1px 2px rgba(0,0,0,0.1);
        #sortTab {
            li{
                color: #666;
                font-size: 14px;
                padding: 15px 20px;
                cursor: pointer;
                border-bottom: 1px solid #E5E5E5;
                &:hover{
                    color: white;
                    background-color: #00c3b6; 
                }
            }
            .active{
                color: white;
                background-color: #00c3b6;
            }
        }
    }
}
@media only screen and (max-width: 1249px) {
    #eventswrapper {
        .site_events {
            .event_list {
                .list-container {
                    margin: 20px 30px;
                    .events_sort {
                        float: left;
                        width: 40%;
                    }
                }
            }
        }
    }
}
@media only screen and (max-width: 1024px) {
    .site_about {
        .about-inner {
            .inner-left {
                float:none;
                width:100%;
            }
            .inner-right {
                float:none;
                width:100%;
                margin:10px 0 0;
                .foreword {
                    float: left;
                    margin-left: 20px;
                    .author {
                        padding-top: 10px;
                    }
                }
            }
        }
    }
    #eventswrapper {
        .site_events {
            .event_nav {
                display: none;
            }
        }
    }
    .about-sort {
        .sort-wrapper {
            float:none;
            #sortDesc {
                margin-left: 0;
                .desc-content {
                    .desc-paragraph{
                        width: 100%;
                    }
                }
            }
            article{
                .sort-pic{
                    display: none;
                }
            }
        }
        .aside {
           float: none;
            margin-left: 0;
            width: 100%;
            margin-top: 30px;
            text-align: center;
        }
    }
}
@media only screen and (max-width:768px) {
    #eventswrapper {
        .site_events {
            .event_list {
                .list-container {
                    .events_sort {
                        float: none;
                        width: 100%;
                        .event-record {
                            .record-sheet {
                                .record-desc {
                                    .depict {
                                        padding-top: 10px;
                                    }
                                    .depict-time {
                                        margin-top: 20px;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    .site_search {
        .search-left {
            width:100%;
            float: none;
        }
        .search-right {
            width:100%;
            margin-top: 10px;
            float: none;
        }
    }
}

@media only screen and (max-width:500px) {
    .site_about {
        .about-inner {
            .inner-left {
                float:none;
                width:100%;
            }
            .inner-right {
                float:none;
                img{
                   float:none; 
                   display: none;
                }
                .foreword {
                    float:none;
                    width: 100%;
                    padding-left: 0;
                    margin-left:0;
                }
            }
        }
    }
}

@media only screen and (max-width:400px) {
    #eventswrapper {
        .site_events {
            .event_list {
                .list-container {
                    .events_sort {
                        .event-record {
                            .record-sheet {
                                .record-time{
                                    float: none;
                                    margin-left: 0;
                                }
                                .record-desc {
                                    width: 100%;
                                    float: none;
                                    margin:10px 0 0;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    .site_search {
        display: none;
    }
}
